<template>
  <div class="top_margin">
    <div class="top_menu">
      <div class="menu_left">
        <router-link to="/"  class="user_icon"></router-link>
        <div class="user_name">{{addr}}</div>
      </div>
      <div class="menu_right">
        <router-link class="menu_person" to="/InvitationCode"></router-link>
        <router-link class="menu_down" to="/InMoney"></router-link>
        <router-link class="menu_backpack" to="/MyPackageCard"></router-link>
        <div class="menu_other" @click="_activePopup"></div>
      </div>
    </div>
  </div>

</template>

<script setup>
  import {computed } from "vue";
  import {state} from '../../dapp'
    import {useStore } from 'vuex';
    let address = state.address;
    let addr = address.substring(0,5) + "***" + address.substring(address.length - 4);
    const _useStore = useStore();
    const commit = _useStore.commit;
    let show = computed(() => _useStore.state.popupType);
    const _activePopup = () => {
      commit("changePopupType", !show.value);
    };
</script>

<style scoped lang="scss">
  .top_margin{
    height: 45px;
  }
.top_menu {
  width: 100%;
  max-width: 375px;
  @include flex;
  position: fixed;
  z-index: 1998;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 20px;
  height: 45px;
  background: #f3f5f9;
}

.menu_left {
  display: flex;
}

.user_icon {
  width: 26px;
  height: 30px;
  background: url("@/assets/index/icon_wallet.png") no-repeat center;
  background-size: 100%;
  margin-right: 10px;
}

.user_name {
  width: 103px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  font-size: 11px;
  color: #fff;
  background: url("@/assets/index/icon_accounts.png") no-repeat center;
  background-size: 100%;
}

.menu_right {
  display: flex;
}

  .menu_right  {
    a,div{
      width: 24px;
      height: 24px;
      margin-right: 15px;
    }
  }

.menu_right > div:last-child {
  margin: 0;
}

.menu_person {
  background: url("@/assets/index/icon_qr_code.png") no-repeat center;
  background-size: 100%;
}

.menu_down {
  background: url("@/assets/index/icon_download.png") no-repeat center;
  background-size: 100%;
}

.menu_backpack {
  background: url("@/assets/index/icon_knapsack.png") no-repeat center;
  background-size: 100%;
}

.menu_other {
  background: url("@/assets/index/icon_more.png") no-repeat center;
  background-size: 100%;
}
</style>
